import React from "react"
import { useNavigate } from "react-router-dom"
import styled from "styled-components"

function NotFound() {
    const navigate = useNavigate()

    const  handleGoBack = () => {
        navigate(-1)
    }

    return (
        <Container>
            <Header>404</Header>
            <Message>Oops! The page you're looking for doesn't exist.</Message>
            <Button onClick={handleGoBack}>Go Back Home</Button>
        </Container>
    )
}

// Styled Components
const Container = styled.div`
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    text-align: center;
    background-color: #f4f4f4;
    color: #333;
    font-family: 'Arial', sans-serif;
`;

const Header = styled.h1`
    font-size: 6rem;
    margin-bottom: 1rem;
`;

const Message = styled.p`
    font-size: 1.5rem;
    margin-bottom: 2rem;
`;

const Button = styled.button`
    padding: 10px 20px;
    font-size: 1rem;
    color: #fff;
    background-color: #007BFF;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    
    &:hover {
        background-color: #0056b3;
    }
`;

export default NotFound